{% extends "base.html" %}
{% block ext_css %}
    <style>
    .first_screen{
        background: url("/static/img/bg1.png");
    }
    .second_screen{
        background: url("/static/img/bg2.png");
    }
    .guitar {
        display: block;
        background: url("/static/img/guitar.png");
        background-size: cover;
        margin: auto;
    }
    .btn_regist{
        width: 14vw;
        float:left;
        margin-top: 43.5vw;
        margin-left: 16vw;
    }
    .btn_login{
        width: 14vw;
        float:right;
        margin-right: 16vw;
        margin-top: 43.5vw;
    }
    .sub_title{
        display: block;
        margin: auto;
        width:18vw;
        height:5vw;
        background: white;
        color: HighlightText;
        margin-top:4vw;
        line-height:5vw;
    }
    li{
        font-size:2.5vw;
        color:white;
    }
    .product_item{
        width: 20vw;
        float: left;
        margin-left: 10vw;
    }
    .gotop_btn{
        float: right;
        margin-right: 5vw;
        margin-top: 5vw;
    }
    </style>
{% endblock %}
{% block title %}
首页
{% endblock %}
{% block content %}
<div class="viewport first_screen">
    <a name="page_top"></a>
    <div class="guitar">
        <a href="/regist/"><img src="./static/img/regist.png" alt="点击报名" class="btn_regist"></a>
        <a href="{{ url_for('www.show_login') }}"><img src="./static/img/login.png" alt="登录" class="btn_login"></a>
        <div class="clearfix"></div>
        <img src="./static/img/first_title.png" alt="" style="width:90%;margin-top:12vw;">
        <div class="sub_title">活动时间</div>
        <div style="color:white;margin-top:1vw;">2017/04/22&nbsp;全天&nbsp;(地球日)</div>
        
    </div>
    <img src="./static/img/down.png" alt="" style="width: 8vw;position:absolute;right:8vw;bottom:35vw;">
    <img src="./static/img/first_bottum.png" style="width:100%;position:absolute;left:0;bottom:0;" alt="">
</div>
<div class="clearfix"></div>
<div class="viewport second_screen">
    <div style="padding: 30px">
        <img src="./static/img/second_words.png" style="width: 100%" alt="">
    </div>
    <img src="./static/img/must_know.png" alt="" style="width:22vw;">
    <div style="width: 80%; text-align: left; margin:auto; padding: 2vw;">
        <ol>
            <li>参赛者需组队报名，每队限额5人，需有一名异性在队伍中</li>
            <li>报名费88元/人</li>
            <li>参赛者将免费获得主办方提供的比赛过程中的保险一份</li>
            <li>参赛者将免费获得赛事包，包含个性主题参赛体恤、号码簿、背包及其他周边</li>
            <li>参赛过程中所有参与者禁止自驾，需乘坐公共交通等绿色环保交通工具</li>
            <li>参赛奖项包含：冠军（10000元奖金）、亚军（5000元奖金）、季军（2000元奖金）、以及其他趣味性惊喜奖项</li>
            <li>报名参赛需要给队伍取一个新颖个性的队名</li>
            <li>比赛规则：每个队伍按照规定时间内（9:00-17:00）自行规划任务路线，以规定方式到达各个任务点位完成任务，获得相应积分（每个点位积分不同），比赛时间结束按活动积分排名颁奖</li>
        </ol>
    </div>
    <div>
        <img src="./static/img/p1.png" alt="" class="product_item">
        <img src="./static/img/p2.png" alt="" class="product_item">
        <img src="./static/img/p3.png" alt="" class="product_item">
    </div>
    <div class="clearfix"></div>
    <a href="#" onclick="go2top();" class="gotop_btn"><img src="./static/img/goup.png" alt="" style="width: 12vw;">

    <img src="./static/img/second_bottum.png" style="width:100%;position:absolute;left:0;bottom:0;" alt="">
</div>
{% endblock %}